<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级学院管理</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f6fa;
            padding: 20px;
            margin: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h2 {
            color: #2c3e50;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            align-items: center;
            flex-wrap: wrap;
        }

        input[type="text"] {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            flex: 1;
            min-width: 200px;
            font-size: 14px;
        }

        input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52,152,219,0.3);
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #7f8c8d;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: white;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #f8f9fa;
            color: #2c3e50;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        .action-links {
            display: flex;
            gap: 10px;
        }

        .action-links a {
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
        }

        .edit-link {
            color: #3498db;
        }

        .delete-link {
            color: #e74c3c;
        }

        .no-data {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
        }

        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
            }

            input[type="text"] {
                width: 100%;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h2>二级学院管理</h2>

    <div class="search-bar">
        <input type="text" id="searchDep" placeholder="输入二级学院编号或名称进行搜索">
        <button class="btn btn-primary" onclick="searchDepartmentByDepID()">编号搜索</button>
        <button class="btn btn-primary" onclick="searchDepartmentByDepName()">名称搜索</button>
        <button class="btn btn-secondary" onclick="fetchDepartments()">重置</button>
        <button class="btn btn-primary" onclick="window.location.href='CM03_departmentForm.jsp'">添加二级学院</button>
    </div>

    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>二级学院编号</th>
            <th>二级学院名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="departmentTableBody">
        </tbody>
    </table>
</div>

<script>
    // 获取所有二级学院信息并渲染
    function fetchDepartments() {
        axios.get('/api/departments/list')
            .then(function(response) {
                let departments = response.data.data;  // 返回响应data字段
                let tableContent = "";  // 表格内容初始化

                // 使用 $.each 遍历 departments 数组
                $.each(departments, function(index, department) {
                    tableContent += "<tr>";
                    tableContent += "<td>" + (index + 1) + "</td>";  // 使用索引值显示行号，从1开始
                    tableContent += "<td>" + department.depID + "</td>";
                    tableContent += "<td>" + department.depName + "</td>";
                    tableContent += "<td>";
                    tableContent += '<a href="CM03_departmentForm.jsp?ID=' + department.ID  + '">编辑</a> | ';
                    tableContent += '<a href="javascript:void(0)" onclick="deleteDepartment(' + department.ID + ')">删除</a>';
                    tableContent += "</td>";
                    tableContent += "</tr>";
                });

                // 插入表格内容
                $('#departmentTableBody').html(tableContent);
            })
            .catch(function(error) {
                console.error("错误:", error);
            });
    }

    // 根据 ID 删除二级学院
    function deleteDepartment(ID) {
        if (ID) {
            if (confirm("确认删除该二级学院吗？")) {
                axios.delete(`/api/departments/delete/`+ID)
                    .then(function(response) {
                        alert(response.data.message);
                        fetchDepartments();  // 刷新列表
                    })
                    .catch(function(error) {
                        alert("删除失败");
                    });
            }
        } else {
            alert("无效的二级学院ID");
        }
    }

    // 根据 depID 搜索二级学院
    function searchDepartmentByDepID() {
        const depID = $('#searchDep').val().trim(); // 获取用户输入的 depID
        console.log("depID="+depID)
        if (!depID) {
            alert("请输入二级学院编号进行搜索！");
            return;
        }
        // 发起后端请求
        axios.get(`/api/departments/depID/`+depID)
            .then(function(response) {
                if (response.data.code === 1) { // 判断请求是否成功
                    const department = response.data.data;
                    const departments = [department]; // 将单条记录包装成数组，便于复用逻辑
                    let tableContent = ""; // 初始化表格内容

                    // 使用 $.each 遍历 departments 数组
                    $.each(departments, function(index, department) {
                        tableContent += "<tr>";
                        tableContent += "<td>" + (index + 1) + "</td>"; // 使用索引值显示行号，从1开始
                        tableContent += "<td>" + department.depID + "</td>";
                        tableContent += "<td>" + department.depName + "</td>";
                        tableContent += "<td>";
                        tableContent += '<a href="CM03_departmentForm.jsp?depID=' + department.depID + '">编辑</a> | ';
                        tableContent += '<a href="javascript:void(0)" onclick="deleteDepartment(\'' + department.ID + '\')">删除</a>';
                        tableContent += "</td>";
                        tableContent += "</tr>";
                    });

                    // 渲染表格内容
                    $('#departmentTableBody').html(tableContent);
                } else {
                    alert("未找到该二级学院！");
                    $('#departmentTableBody').html(""); // 清空表格
                }
            })
            .catch(function(error) {
                console.error("搜索请求错误:", error);
                alert("搜索失败，请稍后重试！");
            });
    }

    // 根据 depName 搜索二级学院
    function searchDepartmentByDepName() {
        const depName = $('#searchDep').val().trim();
        console.log("depName="+depName)
        if (!depName) {
            alert("请输入二级学院名称进行搜索！");
            return;
        }
        // 发起后端请求
        axios.get(`/api/departments/name/`+depName)
            .then(function(response) {
                if (response.data.code === 1) { // 判断请求是否成功
                    const department = response.data.data;
                    const departments = [department]; // 将单条记录包装成数组，便于复用逻辑
                    let tableContent = ""; // 初始化表格内容

                    $.each(departments, function(index, department) {
                        tableContent += "<tr>";
                        tableContent += "<td>" + (index + 1) + "</td>"; // 使用索引值显示行号，从1开始
                        tableContent += "<td>" + department.depID + "</td>";
                        tableContent += "<td>" + department.depName + "</td>";
                        tableContent += "<td>";
                        tableContent += '<a href="CM03_departmentForm.jsp?depID=' + department.depID + '">编辑</a> | ';
                        tableContent += '<a href="javascript:void(0)" onclick="deleteDepartment(\'' + department.ID + '\')">删除</a>';
                        tableContent += "</td>";
                        tableContent += "</tr>";
                    });

                    // 渲染表格内容
                    $('#departmentTableBody').html(tableContent);
                } else {
                    alert("未找到该二级学院！");
                    $('#departmentTableBody').html(""); // 清空表格
                }
            })
            .catch(function(error) {
                console.error("搜索请求错误:", error);
                alert("搜索失败，请稍后重试！");
            });
    }

    // 页面加载时调用获取二级学院信息
    window.onload = fetchDepartments;
</script>

</body>
</html>
